<template>
  姓：<input v-model="firstName" /> <br />
  名：<input v-model="lastName" /> <br />

  <div>name全名：{{ name }}</div>
  <div>fullName全名：{{ fullName }}</div>
  <button @click="changeName">改全名</button>
</template>

<script setup>
import { computed, ref } from 'vue'

let firstName = ref('张')
let lastName = ref('三')

// 这么定义是只读的，无法赋值
let name = computed(() => {
  return firstName.value + lastName.value
})

// 可以这样操作修改，但开发时一般不会去修改
let fullName = computed({
  get() {
    return firstName.value + lastName.value
  },
  set(val) {
    console.log('===', val) // 李四
    const nameArr = val.split('-')
    firstName.value = nameArr[0]
    lastName.value = nameArr[1]
  }
})

// 改变方法
const changeName = () => {
  console.log(name) // computedRef对象
  console.log(name.value) // 张三

  // 无法赋值
  name.value = '李-四'
  // 可以赋值
  fullName.value = '李-四'
}
</script>

<style lang="scss" scoped></style>
